<template>
    <div>
        <el-form ref="form" :model="role" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="role.name"></el-input>
            </el-form-item>
            <el-form-item label="角色编码">
                <el-input v-model="role.code"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="role.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认</el-button>
                <el-button @click="$emit('cancel')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { createOrUpdateRoles, getRoleById } from '@/services/role'

export default Vue.extend({
    name: 'CreateOrEditRole',
    props: {
        roleId: {
            type: [String, Number]
        },
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            role: {
                code: '',
                name: '',
                description: ''
            }
        }
    },
    created () {
        // 如果是编辑操作，则根据角色 ID 加载展示角色信息
        if (this.isEdit) {
            this.loadRole()
        }
    },
    methods: {
        async onSubmit () {
            const { data } = await createOrUpdateRoles(this.role)
            if (data.code === '000000') {
                this.$message('操作成功')
                this.$emit('success')
            }
        },
        async loadRole () {
            const { data } = await getRoleById(this.roleId)
            if (data.code === '000000') {
                this.role = data.data
            }
        },
    }
})
</script>

<style scoped></style>
